<template>
  <div class="map-tools theme-Dark">
    <div
      class="iconfont expanded"
      title="GIS工具"
      @click="showTools = !showTools"
      v-html="showTools ? '&#xe60a;' : '&#xe609;'"
    />
    <el-collapse-transition>
      <div v-show="showTools">
        <div class="measure">
          <div id="measureDialog">
            <div id="measureTools" class="measureTools">
              <div class="measure-area" title="测面" @click="measure('area')">
                <span class="iconfont" :class="{active: active===1}">&#xe608;</span>
              </div>
              <div class="measure-distance" title="测距" @click="measure('distence')">
                <span class="iconfont" :class="{active: active===2}">&#xe604;</span>
              </div>
              <div class="measure-point" title="标点" @click="measure('point')">
                <span class="iconfont" :class="{active: active===3}">&#xe611;</span>
              </div>
              <div class="measure-clear" title="清除" @click="clear">
                <span class="iconfont" :class="{active: active===4}">&#xe8b6;</span>
              </div>
            </div>
          </div>
          <div class="mapOperation">
            <div><span class="iconfont" title="放大" @click="mapZoomChange('in')">&#xec14;</span></div>
            <div><span class="iconfont" title="缩小" @click="mapZoomChange('out')">&#xec13;</span></div>
            <div><span class="iconfont" title="全局视图" @click="mapZoomzx()">&#xe6e7;</span></div>
          </div>
          <div class="maphuifu">
            <span class="iconfont huifus" title="恢复" @click="restoreDefault">&#xeadd;</span>
          </div>
        </div>
        <ul v-if="showLayerType" class="mapType">
          <li
            v-for="(item, index) in list"
            :key="index"
            :class="{ active: current === index }"
            :title="item.name"
            @click="getCurrent(item.name, index)"
          >
            <span class="iconfont" v-html="item.icon" />
          </li>
        </ul>
        <slot name="bottom" />
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    },
    showRestore: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showTools: true,
      list: [
        {
          name: '行政区划图',
          icon: '&#xe60f;'
        },
        {
          name: '卫星图',
          icon: '&#xe6ad;'
        },
        {
          name: '地形图',
          icon: '&#xee2a;'
        }
      ],
      active: 0,
      center: false,
      showLayerType: false,
      current: 1
    }
  },
  mounted() {
    this.showTools = this.show
  },
  methods: {
    getCurrent(data, index) {
      this.current = index
      this.$emit('currentType', data)
    },
    showCenter() {
      this.$emit('center')
    },
    full() {
      this.$emit('full')
    },
    mapZoomChange(data) {
      this.$emit('mapZoom', data)
    },
    mapZoomzx() {
      this.$emit('center')
    },
    measure(data) {
      if (data === 'area') {
        this.active = 1
      } else if (data === 'distence') {
        this.active = 2
      } else if (data === 'point') {
        this.active = 3
      }
      this.$emit('mapceliang', data)
    },
    clear() {
      this.active = 0
      this.$emit('mapclear')
    },
    restoreDefault() {
      this.$emit('restoreDefault')
    }
  }
}
</script>

<style lang="scss" scoped>
.map-tools {
  width: 36px;
  height: auto;
  position: absolute;
  right: 0;
  z-index: 100;

  .expanded {
    width: 36px;
    height: 36px;
    border-radius: 0.208vw;
    font-size: 1.2vw;
    text-align: center;
    line-height: 36px;
    margin-bottom: 0.2vw;
    border-radius: 4px;
    box-shadow: 0px 6px 20px 0px rgba(85, 94, 111, 0.16);
  }

  .measure {
    width: 36px;
    text-align: center;
    border-radius: 0.208vw;
    margin-bottom: 0.2vw;
    padding: 0px 5px;

    .iconfont {
      width: 36px;
      height: 36px;
      font-size: 1.2vw;
    }

    .measureTools {
      div {
        padding: 4px 0px;
        border-bottom: 1px solid #465F81;

        .active {
          color: #fff;
          background-color: rgb(17, 167, 249);
        }

        &.measure-clear {
          span:active {
            color: #fff;
            background-color: rgb(17, 167, 249);
          }
        }
      }
    }

    .mapOperation {
      div {
        padding: 4px 0px;
        border-bottom: 1px solid #465F81;

        span.iconfont:active {
          color: #fff;
          background-color: rgb(17, 167, 249);
        }
      }

      div:last-child {
        border: 0;
      }
    }

    .maphuifu {
      width: 100%;
      display: inline-block;
      line-height: 30px;
      height: 30px;
      border-top: 1px solid #465f81;

      .huifus:active {
        color: #fff;
        background-color: rgb(17, 167, 249);
      }
    }
  }

  .mapType {
    position: absolute;
    right: 46px;
    bottom: 0;
    width: 110px;
    text-align: center;
    border-radius: 0.208vw;

    li {
      float: left;
      width: 36px;
      height: 30px;
      line-height: 30px;

      .iconfont {
        width: 36px;
        height: 36px;
        font-size: 1.2vw;
      }
    }
  }
}

.iconfont {
  cursor: pointer;
}

.theme-Dark {
  .expanded {
    background: rgba($color: #1a4780, $alpha: 0.8);
    border: solid 1px #175b9b;
    color: #bcdff5;
  }

  .measure {
    background-color: rgba($color: #032a5b, $alpha: 0.8);
    border: solid 1px #175b9b;

    .iconfont {
      color: #bcdff5;
    }
  }

  .mapType {
    background-color: rgba($color: #032a5b, $alpha: 0.8);
    border: solid 1px #175b9b;

    li {
      &.active {
        .iconfont {
          color: #40c1f0;
        }
      }
    }

    .iconfont {
      color: #bcdff5;
    }
  }
}

.theme-Light {
  .expanded {
    background: rgba($color: #ffffff, $alpha: 0.5);
    border: solid 1px #43b6ff;
    color: #43b6ff;
  }

  .measure {
    background: rgba($color: #ffffff, $alpha: 0.5);
    border: solid 1px #43b6ff;

    .iconfont {
      color: #43b6ff;
    }
  }

  .mapType {
    background: rgba($color: #ffffff, $alpha: 0.5);
    border: solid 1px #43b6ff;

    li {
      &.active {
        .iconfont {
          color: #064797;
        }
      }
    }

    .iconfont {
      color: #43b6ff;
    }
  }
}
</style>
